<template>
    <div :id="'more-bar'+times" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts/core';
import { GridComponent, type GridComponentOption,LegendComponent, type LegendComponentOption,
    TooltipComponent, type TooltipComponentOption
 } from 'echarts/components';
import { BarChart, type BarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, BarChart, CanvasRenderer,LegendComponent, TooltipComponent]);

type EChartsOption = echarts.ComposeOption<
  GridComponentOption | BarSeriesOption | LegendComponentOption | TooltipComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
const times = new Date().getTime()
onMounted(() => {
    var chartDom = document.getElementById('more-bar'+times)!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        legend: {
            show: true,
            right: '2%',
            itemWidth: 12,
            itemHeight: 8,
            textStyle: {color: '#888'},
            formatter: function (value) { return value; }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            valueFormatter: function (value) {
                return '今日销量：'+value;
            }
        },
        xAxis: {
            type: 'category',
            data: props.data.xAxisDataList,
            axisLabel: {
                show: true,
                color: '#1793df',
                rotate: 45,
                formatter: function (value) { return value; }
            },
            splitLine:{show: true, lineStyle:{color: '#15e6cd60'}},
        },
        grid: {
            top: 20,
            left: 10,
            right: 10,
            bottom: 5,
            containLabel: true
        },
        yAxis: {
            type: 'value',
            nameTextStyle: {
                color: '#a2d4f2',
                align: 'left',
                lineHeight:26,
                fontSize: 12,
            },
            axisLabel: {
                show: true,
                color: '#1793df'
            },
            splitLine:{show: true, lineStyle:{color: '#15e6cd60'}},
        },
        series: {
            type: "bar",
            barWidth: 12,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#15e6cd' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#ebb632' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                borderRadius: 20
            },
            data: props.data.seriesDataList
        }
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>
